<script setup>

import AUTnavMM from "@/components/utils/AUTnavMM.vue";
import NavMenu from "@/components/utils/navMenu.vue";
import {onMounted, ref} from "vue";
import {aGetSongAll} from "@/api/api.js";
import router from "@/router/index.js";

let isCollapse = ref(true)
let changeFlag = ref(0)
let defaultLibrary = ref('歌曲库')
let banList = ref([])

let admin = ref({
  admin_ID: '',
  admin_Name: '吴老兵',
})
let songLists = ref([{
  song_ID: '',
  song_name: '',
  singer_name: '',
  album_name: '',
},])
let albumLists = ref([{
  album_Name: '',
  singer_Name: '',
  create_Time: '',
},])

onMounted(() => {
  SongAll()
})
const toSongME = (song_ID) => {
  router.push({
    path: '/songME',
    query: {song_ID}
  })
}

function handleCommand(command) {
  if (command == 0) {
    defaultLibrary.value = '歌曲库'
    changeFlag.value = 0
  } else {
    defaultLibrary.value = '专辑库'
    changeFlag.value = 1
  }
}

function SongAll() {
  aGetSongAll().then(resp => {
    if (resp.data.code === 200) {
      songLists.value = resp.data.data
      console.log(songLists.value)
    } else {
      console.log(resp.data.msg)
    }
  })
}
</script>

<template>
  <AUTnavMM></AUTnavMM>
  <div style="display: flex">
    <nav-menu ref="childRef" :default_index="2"></nav-menu>
    <div class="box_mod">
      <div class="songList_mod">
        <div class="list_header">
          <span>{{ defaultLibrary }}</span>
          <el-dropdown trigger="click" @command="handleCommand">
            <el-icon class="el-icon--right">
              <arrow-down/>
            </el-icon>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command=0>歌曲库</el-dropdown-item>
                <el-dropdown-item command=1>专辑库</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
        <div class="list_body" v-if="changeFlag === 0">
          <div class="list_title">
            <span style="width: 5%;text-align: center;">#</span>
            <span style="width: 27%;">歌名</span>
            <span style="width: 27%;">歌手</span>
            <span style="width: 27%;">专辑</span>
            <span style="width: 10%;"></span>
          </div>
          <div class="list_form">
            <el-scrollbar height="602px">
              <div class="songlist" v-for="(item, key) in songLists" @dblclick="toSongME(item.song_ID)">
                <div style="width: 5%;text-align: center;">{{ key + 1 }}</div>
                <div style="width: 27%;">
                  {{ item.song_name }}
                </div>
                <div style="width: 27%;">{{ item.singer_name }}</div>
                <div style="width: 27%;">{{ item.album_name }}</div>
                <div style="width: 10%;">
                  <el-button type="danger" plain @click="toSongME(item.song_ID)">详情</el-button>
                </div>
              </div>
            </el-scrollbar>
          </div>
        </div>
        <div class="list_body" v-if="changeFlag === 1">
          <div class="list_title">
            <span style="width: 5%;text-align: center;">#</span>
            <span style="width: 27%;">专辑名</span>
            <span style="width: 27%;">歌手</span>
            <span style="width: 27%;">创建时间</span>
            <span style="width: 10%;"></span>
          </div>


          <div class="list_form">
            <el-scrollbar height="602px">
              <div class="songlist" v-for="(item, key) in albumLists">
                <div style="width: 5%;text-align: center;">{{ key + 1 }}</div>
                <div style="width: 27%;">
                  {{ item.album_Name }}
                  <el-tag class="ml-2" type="danger"
                          v-if="banList.includes(item.album_Name)">下架
                  </el-tag>
                </div>
                <div style="width: 27%;">{{ item.singer_ID }}</div>
                <div style="width: 27%;">{{ item.create_Time }}</div>
                <div style="width: 10%;">
                  <el-button type="danger" plain>下架</el-button>
                </div>
              </div>
            </el-scrollbar>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.box_mod {
  width: 100%;
  background-color: #f5f5f5;
  border-radius: 12px;
  box-shadow: 0px 0px 6px 1px #d7d7d7;
  padding: 20px 30px;
}

.songList_mod {
  width: 90%;
  margin-top: 50px;
  background-color: #ffffff;
  border: 1px solid #ebeef5;
  box-shadow: 2px 2px 12px 0 rgba(0, 0, 0, .1);
  color: #333030;
  border-radius: 4px;
}

.list_header {
  height: 50px;
  width: 100%;
  border-bottom: 2px solid #e5ebf7;
  box-sizing: border-box;
  padding-left: 20px;
  display: flex;
  align-items: center;
}

.list_header span {
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-size: 15px;
}

.list_body {
  width: 100%;
  height: 100%;
}

.list_title {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-color: #edeff2;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
  border-bottom: 2px solid rgb(243, 242, 242);
  margin-bottom: 10px;
}

.list_form {
  width: 100%;
  height: 100%;
}

.songlist {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-color: #f5f6f7;
  border-bottom: 2px solid rgb(243, 242, 242);

}
</style>